<template>
  <div>
    <header-com header-name="春季水果"></header-com>
    <van-dropdown-menu ref="screen" style="">
      <van-dropdown-item ref="item" title="类目">

        <van-grid  >
          <van-grid-item @click="categoryClick" name="西瓜" text="西瓜" />
          <van-grid-item @click="categoryClick" text="哈密瓜" />
          <van-grid-item @click="categoryClick" text="傻瓜" />
          <van-grid-item @click="categoryClick" text="木瓜" />
          <van-grid-item @click="categoryClick" text="苦瓜" />
          <van-grid-item @click="categoryClick" text="冬瓜" />
        </van-grid>

      </van-dropdown-item>
      <van-dropdown-item title="综合" :options="option" />
      <van-dropdown-item title="销量" :options="option2"/>
      <van-dropdown-item title="价格" :options="option3"/>
      <van-dropdown-item ref="screenBtn" title="筛选">
        <div style="font-size: 15px;margin:10px">商品特色</div>
        <div ref="screen" style="display: flex">
          <div  @click="screenClick('hotSale')" class="special">热卖</div>
          <div  @click="screenClick('new')" class="special">新上架</div>
          <div @click="screenClick('recommend')" class="special">推荐</div>
          <div @click="screenClick('discount')" class="special">折扣</div>
        </div>
        <div style="font-size: 15px;margin:10px">价格区间</div>
        <div style="position: relative">
          <van-field autosize style="padding-bottom:0;padding-top: 0;height:25px;background:#f2f2f2;display: inline-block;width: 30%;margin-left: 35px;margin-right: 15px" v-model="startPrice" type="digit"/>
          <div style="display: inline-block;position: absolute;font-size: 25px;color: gray;top: 0px">~</div>
          <van-field autosize style="padding-top: 0;height:25px;background:#f2f2f2;display: inline-block;width: 30%;margin-left: 35px;" v-model="endPrice" type="digit"/>
        </div>
        <div style="margin-top: 10px;margin-left: 30px;margin-bottom: 10px">
          <van-button @click="onCancel" style="height: 25px;font-size: 10px" type="default">重置</van-button>
          <van-button style="height: 25px;font-size: 10px;margin-left: 30px" type="primary" @click="onConfirm">确定</van-button>

        </div>
      </van-dropdown-item>


    </van-dropdown-menu>
    <fruit-list></fruit-list>

  </div>
</template>

<script>
import headerCom from "@/components/header/header";
import fruitList from "@/components/fruitList/fruitList";
export default {
  name: "seasonFruit",
  data(){
    return{
      startPrice:'',
      endPrice:'',
      digit1:"",
      digit2:'',
      specialText:'',
      show:false,
      switch1: false,
      switch2: false,
      option: [
       
        { text: '最新上架', value: 1 },
        { text: '折扣最高', value: 2 },

      ],
      option2: [
        { text: '销量最高', value: 0 },
        { text: '销量最低', value: 1 },
      ],
      option3: [
        { text: '价格最高', value: 0 },
        { text: '价格最低', value: 1 },
      ],
    };
  },

  methods:{
    //点击筛选的确定按钮
    onConfirm(){
      for (let i=0;i<this.$refs.screen.childNodes.length;i++){
        this.$refs.screen.childNodes[i].className="special"
      }
      console.log(this.startPrice,this.endPrice)
      console.log(this.specialText)
      this.endPrice=''
      this.startPrice=''
      this.$refs.screenBtn.toggle();
    },
    // 点击重置
    onCancel(){
      for (let i=0;i<this.$refs.screen.childNodes.length;i++){
        this.$refs.screen.childNodes[i].className="special"
      }
      this.endPrice=''
      this.startPrice=''
    },
    categoryClick(event){
      console.log(event.target.innerText)
      this.$refs.item.toggle();
    },
    tabClick(name){
      console.log(name)
    },
    // 筛选中的商品特色点击
    screenClick(type){
      this.specialText=type;
      for (let i=0;i<this.$refs.screen.childNodes.length;i++){
        this.$refs.screen.childNodes[i].className="special"
      }
      event.target.className+=' activeScreen'

    },

    showPopup(){
      this.show=true
    }
  },
  components:{
    headerCom,
    fruitList
  },

}
</script>

<style scoped>
.special{
  background: #f2f2f2;
  border-radius: 5px;
  height: 20px;
  text-align: center;
  flex: 1;
  margin-left: 15px;
  font-size: 13px;
}
.activeScreen{
  /*border: 1px solid #4bd863!important;*/
  background: #4bd863!important;
  color: #fff;
}

</style>
